<template>
  <div class="videoInfo">
    <div class="name">
      <a-icon type="user"  />
      {{video.user.name}}
    </div>
    <div>
       <a-icon type="profile"  />
      {{video.user.experience}} | {{video.user.education}}
    </div>
    <div class="description">
      <a-icon type="tag" />
      {{video.description}}
    </div>
    <div>
      <a-icon type="compass" />
      {{video.position}}
    </div>
  </div>
</template>

<script>
export default {
  props:['video'],
  name: '',
  data(){
    return {
      
    }
  },
  components: {},
  created(){},
  mounted(){},
  methods: {}
}
</script>
<style>
.videoInfo {
  width: 50%;
  height: 25%;
  /* border: 1px solid black; */
  color: white;
  position: absolute;
  left: 0;
  bottom: 12%;
}
.videoInfo div {
  margin-bottom: 5px;
}
.name {
  font-size: 20px;
  margin-bottom: 5px;
}
.description {
  height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
